<template>
    <div class="wrapper">
        <div class="title">
        </div>
        <div class="echarts" ref="mapRef"></div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import chinaJson from '../china.json'
import * as echarts from 'echarts';
let mapRef = ref()
onMounted(() => {
    getMapEcharts()
})
const getMapEcharts = () => {
    echarts.registerMap('china', chinaJson as any);
    const chart = echarts.init(mapRef.value);
    chart.setOption({
        geo: [{
            map: 'china',
            roam: true, // 鼠标缩放效果
            left: 60,
            top: 80,
            right: 75,
            // bottom: 0,
            itemStyle: {
                normal: {
                    show: 'true',
                    color: '#002350', //地图背景色
                    borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#00F6FF'
                    }, {
                        offset: 1,
                        color: '#53D9FF'
                    }], false),
                    shadowColor: '#076ed3',
                    shadowBlur: 1,
                    shadowOffsetX: 2,
                },
            },
            label: {
                show: true, //文字显示出来
                color: "#ffffff",
                fontSize: 12,
            }

        }],
        series: {
            type: 'lines',//航线的系列
            data: [
                {
                    coords: [
                        [116.405285, 39.904989], // 起点
                        [91.132212, 29.660361], // 终点
                    ],
                    //统一的样式设置
                    lineStyle: {
                        color: "#ffffff",
                        width: 2,
                    }
                },
                {
                    coords: [
                         [112.716747, 32.357612], // 起点
                         [96.386348, 42.727592], // 终点
                    ],
                    //统一的样式设置
                    lineStyle: {
                        color: "#ffffff",
                        width: 2,
                    }
                },
                {
                    coords: [
                        [117.348611, 40.581141], // 起点
                        [91.132212, 29.660361], // 终点
                    ],
                    //统一的样式设置
                    lineStyle: {
                        color: "#ffffff",
                        width: 2,
                    }
                },
                {
                    coords: [
                       [89.238988, 27.796581], // 起点
                        [113.558736, 22.212244], // 终点
                    ],
                    //统一的样式设置
                    lineStyle: {
                        color: "#ffffff",
                        width: 2,
                    }
                },
                {
                    coords: [
                        [120.901349, 31.017327],// 起点
                        [91.132212, 29.660361], // 终点
                    ],
                    //统一的样式设置
                    lineStyle: {
                        color: "#ffffff",
                        width: 2,
                    }
                },
                {
                    coords: [
                         [130.002468, 42.981174], // 起点
                         [90.361846, 38.300163],// 终点
                    ],
                    //统一的样式设置
                    lineStyle: {
                        color: "#ffffff",
                        width: 2,
                    }
                }
            ],
            //是否显示特效
            effect: {
                show: true,
                symbol: "path://M833.873721 546.991182l-257.715696-147.369313a12.777425 12.777425 0 0 1-6.456438-11.829276l6.998237-126.419753a60.591182 60.591182 0 0 0-16.299119-45.556262 59.868783 59.868783 0 0 0-44.111463-18.601763h-8.668783c-17.066667 0-32.733686 6.637037-44.201764 18.692063-11.422928 12.100176-17.156966 28.218695-16.208818 45.330512l6.998236 126.555203a12.506526 12.506526 0 0 1-6.411288 11.784127l-257.760846 147.369312a18.014815 18.014815 0 0 0-9.075132 15.712169v53.863845a18.014815 18.014815 0 0 0 23.748853 17.156966l247.015168-81.63104a13.093474 13.093474 0 0 1 6.591887 2.122046 13.093474 13.093474 0 0 1 5.734039 9.752381l9.120282 148.18201a12.461376 12.461376 0 0 1-7.494886 12.280776l-77.838447 36.571429a18.059965 18.059965 0 0 0-10.38448 16.344268v23.703704c0 5.463139 2.483245 10.655379 6.772487 14.131922a18.330864 18.330864 0 0 0 15.21552 3.521693l111.700882-24.426102 113.461728 24.561552a17.924515 17.924515 0 0 0 15.17037-3.566843 17.924515 17.924515 0 0 0 6.727337-14.086773v-23.839153a18.059965 18.059965 0 0 0-10.384479-16.344268l-77.928748-36.481129a12.732275 12.732275 0 0 1-7.404586-12.506526l9.120282-148.00141a12.822575 12.822575 0 0 1 5.688889-9.662082c1.264198-0.902998 3.521693-1.851146 11.152029-1.489947l242.409876 80.863492a18.105115 18.105115 0 0 0 23.794004-17.156966v-53.818695a17.969665 17.969665 0 0 0-9.075133-15.712169z",
                color: '#ffffff',
                symbolSize: 15,
                trailLength: 0,
                period: 6,
            },
            lineStyle: {
                color: '#fff',
                width: 1,
                opacity: 0.6,
                curveness: 0.2,
            },
        }
    });
}
</script>

<style scoped lang="scss">
.wrapper {
    width: 100%;
    height: 720px;
    // background: #bfc;
    padding: 20px;

    .echarts {
        width: 100%;
        height: 100%;
        // background: #bfc;
    }
}
</style>
